<template>
  <div class="course-card">
    <img :src="course.coverImage" :alt="course.title">
    <div class="course-info">
      <h3>{{ course.title }}</h3>
      <p>{{ course.description }}</p>
      <div class="course-meta">
        <span>{{ course.instructor.name }}</span>
        <span>{{ getLevelText(course.level) }}</span>
        <span>{{ course.studentCount }}人已学习</span>
      </div>
      <div class="course-footer">
        <span class="price">¥ {{ course.price }}</span>
        <router-link :to="`/courses/${course.id}`" class="btn">
          查看详情
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Course } from '@/types/course'

const props = defineProps({
  course: {
    type: Object as () => Course,
    required: true
  }
})

const getLevelText = (level: string) => {
  const levelMap = {
    'BEGINNER': '入门',
    'INTERMEDIATE': '中级',
    'ADVANCED': '高级'
  }
  return levelMap[level] || level
}
</script>

<style scoped>
.course-card {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.course-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.course-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.course-info {
  padding: 15px;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  color: #666;
  margin: 10px 0;
  font-size: 0.9em;
}

.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #f44336;
  font-weight: bold;
}

.btn {
  display: inline-block;
  background-color: #4CAF50;
  color: white;
  padding: 8px 15px;
  text-decoration: none;
  border-radius: 4px;
}
</style>